/**
 * Created by yzdd on 2018/6/3.
 */
import React, {Component} from 'react';
import {
  View,
  Text,
  StyleSheet,
  Image,
  TextInput,
  TouchableOpacity,
  FlatList
} from 'react-native';
import {publicStyle, width} from "../utils/publiscStyle";
import SeperatorLine from "../components/SeperatorLine";
import {CallerPersonStore} from "../logics/CallerPersonStore";
import {observer} from 'mobx-react';
import {observable} from 'mobx';

const styles = StyleSheet.create({
  searchHeader: {
    width,
    height: 49,
    flexDirection: "row",
    alignItems: "center",
    backgroundColor: "#EEEEEE",
    paddingLeft: 15,
    borderBottomWidth: 1,
    borderBottomColor: "#E1E1E1",
  },
  leftInputView: {
    backgroundColor: "#FFFFFF",
    flexDirection: "row",
    alignItems: "center",
    flex: 1,
    height: 35,
    borderRadius: 5,
    paddingLeft: 14
  },
  icon3: {
    width: 16,
    height: 16
  },
  leftInput: {
    flex: 1,
    padding: 0,
    paddingLeft: 10,
    fontSize: 14
  },
  searchBtn: {
    width: 53,
    height: 35,
    alignItems: 'center',
    justifyContent: "center"
  },
  font7: {
    fontSize: 14,
    color: "#666666"
  },
  con: {
    backgroundColor: "#FFFFFF",
    paddingLeft: 15,
    paddingRight: 15,
    flex: 1
  },
  selectItem: {
    width: width - 30,
    height: 44,
    flexDirection: 'row',
    alignItems: "center",
    justifyContent: "space-between",
    borderBottomColor: "#EEEEEE",
    borderBottomWidth: 1
  },
  circleItem: {
    width: 18,
    height: 18,
    borderRadius: 18,
    backgroundColor: "#CCCCCC",
    alignItems: "center",
    justifyContent: "center"
  },
  icon7: {
    width: 10,
    height: 10
  },
  font19: {
    fontSize: 16,
    color: "#333333"
  },
  addBtn: {
    width,
    height: 55,
    flexDirection: 'row',
    alignItems: "center",
    backgroundColor: "#1AAD19",
    justifyContent: 'center'
  },
  font17: {
    fontSize: 16,
    color: "#FFFFFF"
  },
  selectCircleItem: {
    width: 18,
    height: 18,
    borderRadius: 18,
    backgroundColor: "#1AAD19",
    alignItems: "center",
    justifyContent: "center"
  },
  font20: {
    color: "#1AAD19",
    fontSize: 16
  }
});

const searchIcon = require("../assets/search.png");
const duigouIcon = require('../assets/duigou.png');
const data = [
  {name: "安利娟"},
  {name: "白凤县"},
  {name: "杉树"},
]
@observer
export default class CallerPerson extends Component {
  static navigationOptions = {
    title: "领用人"
  }

  callerPersonStore = new CallerPersonStore();

  @observable
  searchText = "";

  @observable
  filterText = "";

  componentWillMount() {
    this.callerPersonStore.from(data)
  }

  renderItem = (item, index) => {
    return (
      <Item navigation={this.props.navigation} item={item} index={index} filterText={this.filterText} list={this.callerPersonStore}/>
    )
  };

  searchSub = () => {
    this.filterText = this.searchText;
  }

  toSub = () => {
    const {goBack} = this.props.navigation;
    let {store,name} = this.props.navigation.state.params;
    this.callerPersonStore.list.forEach((v, i) => {
      if (v.isSelected === true) {
        store[name] = v.name;
      }
    });
    goBack(null);
  }

  render() {
    return (
      <View style={publicStyle.container}>
        <View style={styles.searchHeader}>
          <View style={styles.leftInputView}>
            <Image
              source={searchIcon}
              resizeMode={"contain"}
              style={styles.icon3}
            />
            <TextInput
              style={styles.leftInput}
              placeholder={"请输入领用人姓名/首字母"}
              underlineColorAndroid="transparent"
              onChangeText={(text) => this.searchText = text}
              value={this.searchText}
            />
          </View>
          <TouchableOpacity style={styles.searchBtn} onPress={this.searchSub}>
            <Text style={styles.font7}>搜索</Text>
          </TouchableOpacity>
        </View>

        <FlatList
          style={styles.con}
          data={this.callerPersonStore.list.filter((v, i) => v.name.indexOf(this.filterText) !== -1).slice(0)}
          keyExtractor={(item, index) => index}
          renderItem={({item, index}) => this.renderItem(item, index)}
        />
        <TouchableOpacity style={styles.addBtn} onPress={this.toSub}>
          <Text style={styles.font17}>确定</Text>
        </TouchableOpacity>
      </View>
    );
  }
}

@observer
class Item extends Component {

  changeState = () => {
    const {item} = this.props;
    this.props.list.setUnSelect();
    item.setSelect();
  };

  render() {
    const {item, filterText} = this.props;
    return (
      <TouchableOpacity style={styles.selectItem} onPress={this.changeState}>
        <Text style={styles.font19}>
          {item.name.substr(0, item.name.indexOf(filterText))}
          <Text
            style={styles.font20}>{item.name.substr(item.name.indexOf(filterText), item.name.indexOf(filterText) + filterText.length)}</Text>
          {item.name.substr(item.name.indexOf(filterText) + filterText.length, item.name.length)}
        </Text>
        <View style={[item.isSelected ? styles.selectCircleItem : styles.circleItem]}>
          <Image
            source={duigouIcon}
            resizeMode={"contain"}
            style={styles.icon7}
          />
        </View>
      </TouchableOpacity>
    )
  }
}